<template>
	<view>
		<wrapTab :list="tab_list" v-model="status" :status="'status'" @onTab="onRefresh" />

		<view class="wrap safe-area">
			<view class="wrap-list">
				<block v-for="(item, index) in list" :key="index">
					<view class="item flex column" @click="onDetails(item)">
						<view class="time-status flex align-center just-between">
							<view class="time limit-num-line f-26"> 发布时间：{{ item.createtime_text }} </view>

							<view class="status f-26">
								{{ ["待审核", "已通过", "驳回"][item.audit] }}
							</view>
						</view>

						<view class="title f-28">{{ item.title }}</view>

						<view
							v-if="item.article_type == 1 || (item.article_type == 0 && item.images.length > 0)"
							class="photo-video-bg flex"
						>
							<block v-if="item.article_type == 1">
								<video
									class="photo-item video"
									:poster="$getImageURL(item.image)"
									:src="$getImageURL(item.video)"
								/>
							</block>

							<block v-else>
								<block v-for="(img, idx) in item.images" :key="idx">
									<image class="photo-item" :src="$getImageURL(img)" />
								</block>
							</block>
						</view>

						<view class="bottom-btn-bg flex align-center just-end">
							<view class="btn f-26 one" @click.stop="onEdit(item)">删除/修改</view>

							<view
								class="btn f-26"
								:class="item.will_top == 1 ? 'three' : 'two'"
								@click.stop="onTop(item)"
							>
								置顶
							</view>

							<view
								class="btn f-26"
								:class="item.is_bonus == 1 ? 'three' : 'two'"
								@click.stop="onRecommend(item)"
							>
								推广
							</view>

							<view class="btn f-26 one" @click.stop="onRecord(item)">记录</view>
						</view>
					</view>
				</block>
			</view>

			<wanl-empty v-if="list.length === 0" />
		</view>
	</view>
</template>

<script>
	import { getArticleList } from "@/API/article.js";
	import wrapTab from "@/components/topTab/firstTab.vue";

	export default {
		components: {
			wrapTab,
		},
		data() {
			return {
				tab_list: [
					{ title: "全部", status: "0" },
					{ title: "待审核", status: "1" },
					{ title: "发布中", status: "2" },
					{ title: "待推广", status: "3" },
					{ title: "待置顶", status: "4" },
				],
				status: "0",

				page: 1,
				total: 0,
				list: [],
			};
		},
		onLoad(options) {
			if (options.audit) {
				this.currentTab = options.audit;
			}
		},
		onShow() {
			this.onRefresh();
		},
		onPullDownRefresh() {
			this.onRefresh();
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page++;
				this.getData();
			}
		},
		methods: {
			/**
			 * 编辑删除
			 */
			onEdit(item) {
				this.$jump.to(`/pages/publish/publish?id=${item.id}`);
			},
			/**
			 * 置顶
			 */
			onTop(item) {
				if (item.will_top == 1) {
					return;
				}
				this.$jump.to(`/pages/publish/publishTop/publishTop?id=${item.id}`);
			},
			/**
			 * 推广
			 */
			onRecommend(item) {
				if (item.is_bonus == 1) {
					return;
				}
				this.$jump.to(`/pages/home/article/recommend?article_id=${item.id}&is_shop=${item.is_shop}&type=${item.type}`);
			},
			/**
			 * 记录
			 */
			onRecord(item) {
				this.$jump.to(`/pages/home/article/recommendRecords?article_id=${item.id}`);
			},
			/**
			 * 详情
			 */
			onDetails(item) {
				this.$jump.onArticleDetail(item.id, `&isMine=${true}`);
			},

			/**
			 * 刷新
			 */
			onRefresh() {
				this.page = 1;
				this.getData();
			},
			/**
			 * 网络请求
			 */
			getData() {
				getArticleList({
					page: this.page,
					audit: this.status,
					inspect: 1,
				}).then((res) => {
					this.total = res.data.total;
					const list = res.data.data;
					if (this.page === 1) {
						this.list = list;
					} else {
						this.list = this.list.concat(list);
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 20rpx 0rpx;
		box-sizing: border-box;

		.wrap-list {
			padding: 0 25rpx;
			width: 100%;
			box-sizing: border-box;
			overflow: hidden;

			.item {
				width: 100%;
				background-color: white;
				overflow: hidden;
				border-radius: 16rpx;
				padding: 0 25rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;
				gap: 20rpx;

				.time-status {
					width: 100%;
					height: 80rpx;
					border-bottom: 2rpx solid #eeeeee;
					overflow: hidden;
					gap: 20rpx;

					.time {
						flex: 1;
						--limit-num: 1;
						color: #888888;
					}

					.status {
						color: #00a404;
					}
				}

				.title {
					color: #333333;
					line-height: 1.5em;
				}

				.photo-video-bg {
					margin-left: -25rpx;
					width: calc(100% + 50rpx);
					overflow: hidden;
					flex-wrap: wrap;
					gap: 14rpx;

					.video {
						margin-left: 25rpx;
					}

					.photo-item {
						width: 224rpx;
						height: 224rpx;
						margin-bottom: 15rpx;
					}
				}

				.bottom-btn-bg {
					margin-top: -15rpx;
					width: 100%;
					overflow: hidden;
					height: 100rpx;
					gap: 15rpx;

					.btn {
						width: 150rpx;
						height: 68rpx;
						line-height: 68rpx;
						text-align: center;
						border-radius: 34rpx;
						overflow: hidden;
					}

					.one {
						border: 2rpx solid #cccccc;
						color: #333333;
					}

					.two {
						background: $theme-gradit-color;
						color: white;
					}
					.three {
						background-color: #cccccc;
						color: white;
					}
				}
			}
		}
	}
</style>
